<template>
  <div class="jdConfirm h-full w-full">
    <div v-if="showJdLogin" class="h-full w-full">
      <Login @change-show="showJdLogin = !showJdLogin" />
    </div>
    <div v-else>
      <a-row>
        <a-col :span="7">
          <label>科目代码：</label>
          <a-select
            allowClear
            v-model:value="kmdm"
            style="width: 220px"
            :options="teacherOptions"
            :showSearch="true"
            placeholder="请选择科目代码"
            :filterOption="filterOption"
            @change="teacherList"
            :fieldNames="{ label: 'kmmcOrdm', value: 'kmdm' }"
          >
            <template #suffixIcon>
              <caret-down-outlined class="ant-select-suffix" />
            </template> </a-select
          >（输入科目代码查询）
        </a-col>

        <a-col :span="6">
          <label>条件筛选：</label>
          <a-select
            allowClear
            v-model:value="sjtj"
            style="width: 220px"
            :options="sjtjList"
            :showSearch="true"
            placeholder="请选择筛选条件"
            @change="teacherList"
          >
            <template #suffixIcon>
              <caret-down-outlined class="ant-select-suffix" />
            </template>
          </a-select>
        </a-col>
        <a-col :span="7">
          <label>准考证号：</label>
          <a-input style="width: 220px" v-model:value="zkzh" placeholder="请输入准考证号"></a-input>
        </a-col>
        <a-col :span="4">
          <a-button class="search-btn" type="primary" @click="teacherList">查询</a-button>
          <a-button class="search-btn ml-10px" @click="reset">重置</a-button>
        </a-col>
      </a-row>
      <div class="jdConfirmContent" v-if="!!kmdm">
        <div class="left">
          <div
            v-for="(item, index) in listMap"
            class="list"
            :style="activeIndex == index ? 'background:red;color:#ffffff' : ''"
            @click="showIndex(index, item)"
            :key="item.ksxm"
          >
            {{ item.ksxm }}
          </div>
        </div>
        <div class="center">
          <div class="main">
            <div class="left-wrap">
              <div class="h-l top">
                <span class="title">答卷预览</span>
              </div>
              <div
                v-for="(item, index) in imgList"
                :key="item"
                class="h-l item"
                @click="changeExam(index, item)"
              >
                <span class="count">{{ index + 1 }}</span>
                <img
                  class="img"
                  :class="examPagerIndex == index ? 'img-checked' : ''"
                  :src="imgUrl + item"
                />
              </div>
            </div>
            <div class="center-wrap">
              <template v-for="(item, index) in imgList" :key="index">
                <canvasContainer
                  :imageIndex="item.id"
                  :img-url="imgUrl + item"
                  v-if="examPagerIndex == index"
                />
              </template>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="select-box"
            >·
            <div v-for="(item, index) of JdInfoStList">
              <div>{{ item.parentTmbt }}{{ item.stMc }}{{ item.stLx }}</div>
              <div class="select-input">
                <div
                  v-for="(child, index) of item.childList"
                  :style="{
                    width: (index + 1) % 5 == 0 ? '100%' : 'auto',
                  }"
                >
                  <a-form ref="formRef" class="form">
                    <a-form-item allowClear :label="child.stMc">
                      <a-select
                        allowClear
                        v-model:value="child.answer"
                        :style="(index + 1) % 5 == 0 ? 'width:42%' : '90%'"
                        :options="child.options"
                        :showSearch="true"
                        mode="multiple"
                        placeholder="请选择考生答案"
                        :class="child.answer?.includes('Z') ? 'z-class' : ''"
                      >
                        <template #suffixIcon>
                          <caret-down-outlined class="ant-select-suffix" />
                        </template>
                      </a-select>
                    </a-form-item>
                  </a-form>
                </div>
              </div>
            </div>
          </div>
          <a-button class="submit" type="primary" @click="submitAnwser">提交并查阅下一个</a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, watch, reactive } from 'vue'
import { useGlobSetting } from '/@/hooks/setting'
const { imgUrl } = useGlobSetting()
import { Form } from 'ant-design-vue'
import {
  getNeedWorkJdKmdmAndKs,
  getZyImgByKmdmAndZkzh,
  getCustomJdInfoStList,
  handUpLoadJdAnswer,
  getLastOneHandJdInfo,
  findKsList,
} from '/@/api/jdConfirm/jdConfirm'
import canvasContainer from './conciseCanvas.vue'
import { useMessage } from '/@/hooks/web/useMessage'
import Login from './login/Login.vue'
import { unref } from 'vue'
const zkzh = ref(undefined)
const { createMessage, createConfirm } = useMessage()
const kmdm = ref(undefined)
const sjtj = ref(undefined)
const activeIndex = ref(0)
const teacherOptions = ref([])
const imgList = ref<any>([])
const listMap = ref<any>([])
const FormItem = Form.Item
const sjtjList = ref([
  { label: '两遍不一致', value: 'TYPE1' },
  { label: '答案不全', value: 'TYPE2' },
  { label: '答案异常', value: 'TYPE3' },
])
// TYPE1("两遍不一致"),
//   TYPE2("答案不全(只有一次或一次都没有)"),
//   TYPE3("答案异常"),
const formData = reactive<any>({
  account: '',
  password: '',
})

const showJdLogin = ref(true)
//获取科目代码
const getNeed = () => {
  getNeedWorkJdKmdmAndKs({}).then(res => {
    res.data.forEach((el, index) => {
      el.kmmcOrdm = el.kmdm + '(' + el.kmmc + ')'
      // if(!!sjtj.value){
      //   if(el.kmdm!=kmdm.value){
      //     res.data.splice(index,1)
      //   }
      // }
    })
    activeIndex.value = 0
    teacherOptions.value = res.data
  })
}
//考生列表
const reset = () => {
  zkzh.value = undefined
  kmdm.value = undefined
  sjtj.value = undefined
}
const rules = {
  answer: [{ required: true, message: '选项不能为空', trigger: 'blur' }],
}
//获取最近一次考生答案
const lastInfo = ref({})
const getLastOneJdInfo = () => {
  getLastOneHandJdInfo({
    kmdm: kmdm.value,
    zkzh: ksInfo?.value.zkzh,
    kmYear: '2024',
  }).then(res => {
    if (res.code == 200) {
      lastInfo.value = res.data
    }
  })
}
//获取考生信息
const teacherList = (option, opts) => {
  findKsList({
    kmdm: kmdm.value,
    zkzh: zkzh.value,
    filterType: sjtj.value,
  }).then(res => {
    if (res.code == 200) {
      listMap.value = res.data
      activeIndex.value = 0
      ksInfo.value = listMap.value[activeIndex.value]
      imgList.value = []
      JdInfoStList.value = []
      getZyImgB()
      getLastOneJdInfo()
      getJdInfoStList()
    }
  })
}
//获取考生试卷图片
const getZyImgB = () => {
  getZyImgByKmdmAndZkzh({
    kmdm: kmdm.value,
    zkzh: ksInfo?.value.zkzh,
  }).then(res => {
    imgList.value = res.data
  })
}
//获取考生试卷图片
const JdInfoStList: any = ref([])
const getJdInfoStList = () => {
  getCustomJdInfoStList({
    kmdm: kmdm.value,
  }).then(res => {
    if (res.code == 200) {
      const obj = ref({
        label: '',
        value: '',
      })
      res.data.forEach((el, index) => {
        el.childList.forEach((ele, indx) => {
          if (lastInfo?.value[el.stId]) {
            ele.answer = lastInfo?.value[el.stId][indx]?.translateAnswer
              ? lastInfo?.value[el.stId][indx]?.translateAnswer?.split(',')
              : ['Z']
          }
          ele.options = []
          ele.xxslList.forEach((elem, inx) => {
            obj.value = {
              label: elem,
              value: elem,
            }
            ele.options.push(obj.value)
          })
          ele.options.push(
            (obj.value = {
              label: 'Z',
              value: 'Z',
            })
          )
          // console.log(ele.options)
        })
      })
      JdInfoStList.value = res.data
    } else {
      createMessage.error(res.message)
    }
  })
}
// 将输入的内容与显示的内容进行匹配
const filterOption = (input: string, option: any) => {
  return option.kmdm.indexOf(input) >= 0
}
//考生信息aweeeee
const ksInfo: any = ref({})
const showIndex = (index, item) => {
  activeIndex.value = index
  ksInfo.value = item
  imgList.value = []
  JdInfoStList.value = []
  getZyImgB()
  getLastOneJdInfo()
  getJdInfoStList()
}
/**
 * 切换试卷页码
 */
const examPagerIndex = ref(0)
const changeExam = (index, item) => {
  examPagerIndex.value = index
}
const formRef = ref()
//提交答案
const submitAnwser = async () => {
  const list: any = ref([])
  const obj: any = ref({})
  JdInfoStList.value.forEach((el, index) => {
    el.childList.forEach((ele, indx) => {
      obj.value = {
        stId: ele.stId,
        stPid: ele.stPid,
        kmYear: ele.kmYear,
        kmdm: ele.kmdm,
        kmmc: ele.kmmc,
        translateAnswer: ele.answer ? ele.answer?.join(',') : 'Z',
        zkzh: ksInfo.value.zkzh,
        ksxm: ksInfo.value.ksxm,
        cid: indx,
      }
      list.value.push(obj.value)
    })
  })
  await handUpLoadJdAnswer({
    zkzh: ksInfo.value.zkzh,
    ksxm: ksInfo.value.ksxm,
    kmYear: '2024',
    dtkJdInfoList: list.value,
    kmdm: kmdm.value,
  }).then(res => {
    if (res.code == 200) {
      createMessage.success('提交成功')
      if (activeIndex.value == listMap.value.length - 1) {
        return createMessage.error('已经是最后一条数据，请选择其他考生或者其他科目！')
      }
      activeIndex.value++
      imgList.value = []
      list.value = []
      ksInfo.value = listMap.value[activeIndex.value]
      getZyImgB()
      getLastOneJdInfo()
      getJdInfoStList()
    } else {
      createMessage.error(res.message)
    }
  })
}

watch(showJdLogin, () => {
  if (!unref(showJdLogin)) {
    getNeed()
  }
})
</script>
<style lang="less" scoped>
.jdConfirm {
  padding: 20px;

  .jdConfirmContent {
    width: 100%;
    height: 92vh;
    display: flex;
    margin-top: 10px;

    .left {
      width: 15%;
      height: 100%;
      overflow: scroll;

      .list {
        height: 50px;
        line-height: 50px;
        cursor: pointer;
        padding-left: 5px;
      }
    }

    .center {
      width: 55%;
      height: 100%;

      .main {
        display: flex;
        flex-direction: row;
        width: 100%;
        background-color: #fff;
        border-radius: 5px;
        height: 100%;

        .left-wrap {
          padding: 10px 20px;
          border-right: 2px solid #ccc;
          transition: width 2s;
          -webkit-transition: width 2s;
          overflow-y: auto;
          width: 200px;

          .top {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;

            .title {
              font-size: 130%;
              color: #3f4355;
            }

            .arrow {
              width: 30px;
              height: 30px;
              animation-duration: 1000ms;
            }
          }

          .item {
            margin-bottom: 20px;
            margin-right: 20px;

            .count {
              margin-right: 8px;
              font-weight: 700;
            }

            .img {
              width: 100%;
              height: 100%;
              border-radius: 5px;
              border: 2px transparent solid;
            }

            .img-checked {
              border: 2px #fe2727 solid;
            }
          }
        }

        .center-wrap {
          width: calc(100% - 200px);
          box-sizing: border-box;
          height: 100%;

          .pager {
            height: 100%;
            width: 100%;
          }
        }
      }
    }

    .right {
      width: 30%;
      height: 100%;
      padding: 20px;
      background: #f5f5f5;

      > div {
        padding: 20px;
      }

      .z-class {
        border: 2px solid red !important;

        .ant-select:not(.ant-select-customize-input) .ant-select-selector {
          border: 1px solid red !important;
        }
      }

      .select-box {
        height: 90%;
        display: flex;
        justify-content: space-between;
        width: 100%;
        flex-wrap: wrap;
        overflow-y: scroll;

        > div {
          width: 100%;
          margin-bottom: 10px;
        }

        .select-input {
          display: flex;
          width: 100%;
          flex-wrap: wrap;
          justify-content: space-between;

          > div {
            width: 48%;
          }
        }
      }

      .submit {
        cursor: pointer;
        color: white;
        background: #1d86fc;
        border-radius: 4px;
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80%;
        margin: 0 auto;
      }
    }
  }
}
</style>
